<script setup>
  import { useRoute } from "vue-router";
  import { ref, onMounted } from "vue";
  import { getCommendList } from "@/api/movie";
  const commendList = ref([]);
  const commendList2 = ref([]);
  const commendList22 = ref([]);
  const commendList222 = ref([]);
  // 使用 useRoute 获取当前路由
  const route = useRoute();

  // 获取路由中的 `type` 参数
  const type = route.query.type;
  console.log(type);
  onMounted(async () => {
    try {
      // 调用 sys.js 中的 fetchBanners 函数来请求数据
      const data = await getCommendList();
      commendList.value = data["result"]; // 将返回的数据赋值给 banners 数组
      commendList2.value = data["result"]; //
      commendList22.value = data["result"]; //
      commendList222.value = data["result"]; //
    } catch (error) {
      console.error("Failed to fetch banner data:", error);
    }
  });
</script>

<template>
  <!-- Wrapper -->
  <div id="wrapper">
    <!-- contents -->
    <div class="main_content">
      <div class="main_content_inner">
        <h3>
          {{
            type === "shortMovie"
              ? "短片集合"
              : type === "up"
                ? "UP集合"
                : "电视剧推荐"
          }}
        </h3>
        <div class="section-small">
          <ul
            v-if="type === 'shortMovie'"
            class="uk-child-width-1-4@m uk-child-width-1-2@s"
            uk-scrollspy="target: > div; cls: uk-animation-slide-bottom-small; delay: 100"
            uk-grid
          >
            <BxjMovieBase
              v-for="(movieBase, index) in commendList"
              :key="index"
              :name="movieBase.name"
              :img="movieBase.img"
              :avator="movieBase.avator"
              :uploader="movieBase.uploader"
              :upTime="movieBase.upTime"
            />
            <BxjMovieBase
              v-for="(movieBase, index) in commendList2"
              :key="index"
              :name="movieBase.name"
              :img="movieBase.img"
              :avator="movieBase.avator"
              :uploader="movieBase.uploader"
              :upTime="movieBase.upTime"
            />
            <BxjMovieBase
              v-for="(movieBase, index) in commendList22"
              :key="index"
              :name="movieBase.name"
              :img="movieBase.img"
              :avator="movieBase.avator"
              :uploader="movieBase.uploader"
              :upTime="movieBase.upTime"
            />
            <BxjMovieBase
              v-for="(movieBase, index) in commendList222"
              :key="index"
              :name="movieBase.name"
              :img="movieBase.img"
              :avator="movieBase.avator"
              :uploader="movieBase.uploader"
              :upTime="movieBase.upTime"
            />
          </ul>
          <div
            v-if="type === 'up'"
            class="uk-child-width-1-4@m uk-child-width-1-2@s"
            uk-scrollspy="target: > div; cls: uk-animation-slide-bottom-small; delay: 100"
            uk-grid
          >
            <div>
              <router-link :to="{ path: '/info', query: { id: '123' } }">
                <a href="single-channal.html">
                  <div class="channal-card animate-this">
                    <div
                      class="channal-card-thumbnail"
                      data-src="@/assets/images/channals/img-3.jpg"
                      uk-img
                    ></div>
                    <div class="channal-card-body">
                      <div class="channal-card-creator">
                        <img
                          src="@/assets/images/avatars/avatar-5.jpg"
                          alt=""
                        />
                      </div>
                      <h4>Intelligent</h4>
                      <p><span>20K Subscribers . 26 Videos 11M views</span></p>
                    </div>
                  </div>
                </a>
              </router-link>
            </div>

            <div>
              <router-link :to="{ path: '/info', query: { id: '123' } }">
                <a href="single-channal.html">
                  <div class="channal-card animate-this">
                    <div
                      class="channal-card-thumbnail"
                      data-src="@/assets/images/channals/img-3.jpg"
                      uk-img
                    ></div>
                    <div class="channal-card-body">
                      <div class="channal-card-creator">
                        <img
                          src="@/assets/images/avatars/avatar-5.jpg"
                          alt=""
                        />
                      </div>
                      <h4>Intelligent</h4>
                      <p><span>20K Subscribers . 26 Videos 11M views</span></p>
                    </div>
                  </div>
                </a>
              </router-link>
            </div>

            <div>
              <router-link :to="{ path: '/info', query: { id: '123' } }">
                <a href="single-channal.html">
                  <div class="channal-card animate-this">
                    <div
                      class="channal-card-thumbnail"
                      data-src="@/assets/images/channals/img-3.jpg"
                      uk-img
                    ></div>
                    <div class="channal-card-body">
                      <div class="channal-card-creator">
                        <img
                          src="@/assets/images/avatars/avatar-5.jpg"
                          alt=""
                        />
                      </div>
                      <h4>Intelligent</h4>
                      <p><span>20K Subscribers . 26 Videos 11M views</span></p>
                    </div>
                  </div>
                </a>
              </router-link>
            </div>
            <div>
              <router-link :to="{ path: '/info', query: { id: '123' } }">
                <a href="single-channal.html">
                  <div class="channal-card animate-this">
                    <div
                      class="channal-card-thumbnail"
                      data-src="@/assets/images/channals/img-3.jpg"
                      uk-img
                    ></div>
                    <div class="channal-card-body">
                      <div class="channal-card-creator">
                        <img
                          src="@/assets/images/avatars/avatar-5.jpg"
                          alt=""
                        />
                      </div>
                      <h4>Intelligent</h4>
                      <p><span>20K Subscribers . 26 Videos 11M views</span></p>
                    </div>
                  </div>
                </a>
              </router-link>
            </div>
            <div>
              <router-link :to="{ path: '/info', query: { id: '123' } }">
                <a href="single-channal.html">
                  <div class="channal-card animate-this">
                    <div
                      class="channal-card-thumbnail"
                      data-src="@/assets/images/channals/img-3.jpg"
                      uk-img
                    ></div>
                    <div class="channal-card-body">
                      <div class="channal-card-creator">
                        <img
                          src="@/assets/images/avatars/avatar-5.jpg"
                          alt=""
                        />
                      </div>
                      <h4>Intelligent</h4>
                      <p><span>20K Subscribers . 26 Videos 11M views</span></p>
                    </div>
                  </div>
                </a>
              </router-link>
            </div>
            <div>
              <router-link :to="{ path: '/info', query: { id: '123' } }">
                <a href="single-channal.html">
                  <div class="channal-card animate-this">
                    <div
                      class="channal-card-thumbnail"
                      data-src="@/assets/images/channals/img-3.jpg"
                      uk-img
                    ></div>
                    <div class="channal-card-body">
                      <div class="channal-card-creator">
                        <img
                          src="@/assets/images/avatars/avatar-5.jpg"
                          alt=""
                        />
                      </div>
                      <h4>Intelligent</h4>
                      <p><span>20K Subscribers . 26 Videos 11M views</span></p>
                    </div>
                  </div>
                </a>
              </router-link>
            </div>
            <div>
              <router-link :to="{ path: '/info', query: { id: '123' } }">
                <a href="single-channal.html">
                  <div class="channal-card animate-this">
                    <div
                      class="channal-card-thumbnail"
                      data-src="@/assets/images/channals/img-3.jpg"
                      uk-img
                    ></div>
                    <div class="channal-card-body">
                      <div class="channal-card-creator">
                        <img
                          src="@/assets/images/avatars/avatar-5.jpg"
                          alt=""
                        />
                      </div>
                      <h4>Intelligent</h4>
                      <p><span>20K Subscribers . 26 Videos 11M views</span></p>
                    </div>
                  </div>
                </a>
              </router-link>
            </div>
            <div>
              <router-link :to="{ path: '/info', query: { id: '123' } }">
                <a href="single-channal.html">
                  <div class="channal-card animate-this">
                    <div
                      class="channal-card-thumbnail"
                      data-src="@/assets/images/channals/img-3.jpg"
                      uk-img
                    ></div>
                    <div class="channal-card-body">
                      <div class="channal-card-creator">
                        <img
                          src="@/assets/images/avatars/avatar-5.jpg"
                          alt=""
                        />
                      </div>
                      <h4>Intelligent</h4>
                      <p><span>20K Subscribers . 26 Videos 11M views</span></p>
                    </div>
                  </div>
                </a>
              </router-link>
            </div>
          </div>
        </div>
        <BxjPage />
      </div>
    </div>
  </div>
</template>

<style></style>
